<template>
  <div>
    child3组件 - {{ count }} - <button @click="handleClick">btn</button> -
    <button @click="handleClick2">btn2</button> -
    <button @click="handleClick3">btn3</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// import { ADD } from "@/store/mutation-types";
export default {
  computed: mapState(["count"]),
  methods: {
    // mapMutations要放在methods的里面
    // mapMutations的作用是映射，将仓库的add和minus函数映射到组件的methods的add和minus函数上
    // 组件就有了add和minus函数，会跟仓库的函数保持一致
    ...mapMutations(["add", "minus"]),
    handleClick() {
      // 触发仓库的mutations的函数时使用commit方法,第一个参数就是函数名称
      // this.$store.commit("add", { num: 2 });
      this.add({ num: 2 });
    },
    handleClick2() {
      // this.$store.commit("add", { num: 3 });
      // 等价的（对象风格的提交方式）
      // this.$store.commit({
      //   type: "add",
      //   num: 3,
      // });
      this.add({ num: 3 });
    },
    handleClick3() {
      // this.$store.commit("minus");
      this.minus();
    },
  },
};
</script>
